import $ from './library/jquery.js';
import cookie from './library/cookie.js';
$(function() {
    // ajax
    let id = location.search.split('=')[1];

    $.ajax({
        type: "get",
        url: "../../interface/getItem.php",
        data: { id },
        dataType: "json",
        success: function(res) {
            // picture
            let pic = JSON.parse(res.picture);

            $('.img>img').attr('src', pic[1].src);
            $('.img-li').html(`<img src="${pic[1].src}" alt="">
            <img src="${pic[2].src}" alt="">`);


            $('.img>span').css('background-image', `url(${pic[1].src})`);
            // title
            $('.main-mid>h3').text(res.title);
            $('.price>em').append(res.price);
            $('.rt>i').html(res.cg);
            $('.lt>span>i').html(res.pl);
            $('.ty>.color').html(res.taocan);
            JSON.parse(res.color).forEach(function(el) {
                $('.co-ty').append('<span>' + el + '</span>');
            })
            if ($('.co-ty').children().length < 3) {
                $('.co-ty>span:last-child').addClass('color');
            }
            //花呗
            $('.three').html((+$('.num>input').val() * +res.price / 3).toFixed(2));
            $('.six').html((+$('.num>input').val() * +res.price / 6).toFixed(2));
            $('.twel').html((+$('.num>input').val() * +res.price / 12).toFixed(2));
            //数量
            $('.del').on('click', function() {
                if ($('.num>input').val() <= 1) {
                    $('.num>input').val(1);
                    $('.del').css('cursor', 'no-drop');
                    $('.del').css('color', '#ccc');
                } else {
                    $('.del').css('cursor', 'pointer');
                    $('.num>input').val($('.num>input').val() - 1);
                    $('.del').css('color', '#333');
                }
                if ($('.num>input').val() <= 1) {
                    $('.num>input').val(1);
                    $('.del').css('cursor', 'no-drop');
                    $('.del').css('color', '#ccc');
                }
                $('.inc').css('cursor', 'pointer');
                $('.inc').css('color', '#333');
                //花呗分期动态
                $('.three').html((+$('.num>input').val() * +res.price / 3).toFixed(2));
                $('.six').html((+$('.num>input').val() * +res.price / 6).toFixed(2));
                $('.twel').html((+$('.num>input').val() * +res.price / 12).toFixed(2));
            });
            $('.num>span>em').html(+res.num);
            $('.inc').on('click', function() {

                if ($('.num>input').val() >= +res.num) {
                    $('.num>input').val(+res.num);
                    $('.inc').css('cursor', 'no-drop');
                    $('.inc').css('color', '#ccc');
                } else {
                    $('.inc').css('cursor', 'pointer');
                    $('.num>input').val(+$('.num>input').val() + 1);
                    $('.inc').css('color', '#333');
                }
                if ($('.num>input').val() >= +res.num) {
                    $('.num>input').val(+res.num);
                    $('.inc').css('cursor', 'no-drop');
                    $('.inc').css('color', '#ccc');
                }
                $('.del').css('cursor', 'pointer');
                $('.del').css('color', '#333');

                $('.three').html((+$('.num>input').val() * +res.price / 3).toFixed(2));
                $('.six').html((+$('.num>input').val() * +res.price / 6).toFixed(2));
                $('.twel').html((+$('.num>input').val() * +res.price / 12).toFixed(2));
            });
            $('.del+input').on('input', function() {
                if ($('.num>input').val() <= 1) {
                    $('.num>input').val(1);
                    $('.del').css('cursor', 'no-drop');
                    $('.del').css('color', '#ccc');
                    $('.inc').css('cursor', 'pointer');
                    $('.inc').css('color', '#333');
                } else if ($('.num>input').val() >= +res.num) {
                    $('.num>input').val(+res.num);
                    $('.inc').css('cursor', 'no-drop');
                    $('.inc').css('color', '#ccc');
                    $('.del').css('cursor', 'pointer');
                    $('.del').css('color', '#333');
                } else {
                    $('.del').css('cursor', 'pointer');
                    $('.del').css('color', '#333');
                    $('.inc').css('cursor', 'pointer');
                    $('.inc').css('color', '#333');
                }

                $('.three').html((+$('.num>input').val() * +res.price / 3).toFixed(2));
                $('.six').html((+$('.num>input').val() * +res.price / 6).toFixed(2));
                $('.twel').html((+$('.num>input').val() * +res.price / 12).toFixed(2));
            });
            //cookie
            $('.add').on('click', function() {
                addItem(res.id, res.price, $('.num>input').val(), $('.co-ty>.color').html(), $('.ty>.color').html());
                $('.add').attr('href', `../../interface/add.php?username=${cookie.get('username')}&car=${cookie.get('shop')}`);

            });
            //水平图片切换
            $('.img-li>img:first-child').css('border', '2px solid #f40')
            $('.img-li>img').mouseover(function() {
                $(this).css('border', '2px solid #f40');

                $(this).siblings().css('border', '2px solid transparent');
            })
            $('.img-li').on('mouseover', 'img', function() {
                $('.img>span').css('background-image', `url(${$(this).attr('src')})`);
                $('.img>img').attr('src', $(this).attr('src'));
            })

            //颜色分类选项1
            if ($('.co-ty>span:first-child').siblings().length > 1) {
                $('.co-ty>span:first-child+span').addClass('color');
            }
        }
    });
    //cookie 函数
    function addItem(id, price, num, color, meal) {
        let shop = cookie.get('shop');
        let product = {
            id,
            price,
            num,
            color,
            meal
        };

        if (shop && shop != 'null') {
            shop = JSON.parse(shop);

            // 判断当前的商品id在cookie数据中是否存在
            if (shop.some(el => el.id === id)) {
                shop.forEach(elm => {

                    // elm.id === id ? elm.num = +elm.num + +num : ;
                    if (elm.id === id) {
                        elm.num = +elm.num + +num
                        if (elm.color !== color) { elm.color += ',' + color }
                    } else {
                        null;
                    }
                });
            } else {
                shop.push(product);
            }


        } else { // 没有存cookie的情况
            shop = []; // 初始化成数组
            shop.push(product);
        }

        cookie.set('shop', JSON.stringify(shop), 1);


    }


    //更多市场
    $('.ls-dl').mouseover(function() {
        $('.more1').css('border-bottom-color', 'white');
    });
    $('.more1').mouseover(function() {
        $('.more1').css('border-bottom-color', 'white');
    })
    $('.more').mouseout(function() {

        $('.more1').css('border-bottom-color', '#e2e2e2');
    });




    // 售后服务

    $('.fw>ul>li').mouseover(function() {

        $('.fw>ul>li').css('display', 'block');

        if ($('.fw>ul>li').index(this)) {
            $(this).css('background-color', '#FFF2E8');
        }

    });
    $('.fw>ul>li').mouseout(function() {

        $('.fw>ul>li:not(:first)').css('display', 'none');
        if ($('.fw>ul>li').index(this)) {
            $(this).css('background-color', 'white');
        }
    });

    // 花呗分期颜色分类等

    $('.flower>span:not(:first-child)').on('click', function() {
        $(this).toggleClass('act');
        $(this).siblings().removeClass('act');
    })
    $('.ty>span:not(:first-child)').on('click', function() {
        $(this).toggleClass('color');
        $(this).siblings().removeClass('color');
    });

    $('.co-ty').on('click', 'span:not(:first-child)', function() {
        $(this).toggleClass('color');
        $(this).siblings().removeClass('color');
    });
    //放大镜
    $('.img>img').on('mouseover', function(ev) {
        $('.img>div').css('display', 'block');
        $('.img>div').css('left', ev.offsetX - 40);
        $('.img>div').css('top', ev.offsetY - 40);
        $('.img>span').css('display', 'block');
    });
    $('.img>div').on('mouseout', function(ev) {
        $('.img>div').css('display', 'none');
        $('.img>div').css('left', 0);
        $('.img>div').css('top', 0);
        $('.img>span').css('display', 'none');
    });

    $('.img>div').on('mousemove', function(ev) {
        let x = $('.img>div').position().left + ev.offsetX - 60,
            y = $('.img>div').position().top + ev.offsetY - 60,
            bk_x = ($('.img>div').position().left - 20) / 400 * 800,
            bk_y = ($('.img>div').position().top - 20) / 400 * 800;
        if (x <= 20) {
            x = 20;
        } else if (x >= 300) {
            x = 300;
        }
        if (y <= 20) {
            y = 20;
        } else if (y >= 300) { y = 300; }
        $('.img>div').css('left', x);
        $('.img>div').css('top', y);
        $('.img>span').css('background-position', `${-bk_x}px ${-bk_y}px`);
    });
    //登录左上角

    if (cookie.get('username')) {
        $('.logtp').html(cookie.get('username'));
        $('.logtp').attr('href', 'javascript:;');
        $('.logtp').css('color', '#6c6c6c!important');
        $('.exit').css('display', 'block');
    } else {
        $('.logtp').html('亲，请登录 ');
        $('.logtp').attr('href', './login.html');
        $('.logtp').css('color', '#f22e00');
        $('.exit').css('display', 'none');
    }
    //退出登录
    $('.exit').on('click', function() {
        let username = cookie.get('username'),
            car = JSON.stringify(cookie.get('shop'));
        $.ajax({
            type: "get",
            url: "../../interface/exit.php?username=" + username + "&car=" + car + "",

            success: function(res) {
                // console.log(res);
                cookie.remove('username');
                cookie.remove('shop');
                cookie.remove('isLogined');
                location.href = './login.html';

            }
        });
    })

    //购物车数量
    if (cookie.get('shop') != 'null' && cookie.get('shop')) { $('.carnum').html(JSON.parse(cookie.get('shop')).length); }
})